<template>
<div class="YTable" :class="{'y-unable-select-all': unableSelectAll}">
  <div :class="{
    'YTable-tHeader': !!title,
    'YTable-header': !title
  }">
    <div class="YTable-title"><span v-if="title">{{title}}</span></div>
    <div class="YTable-buttons">
      <slot name="button"></slot>
    </div>
  </div>
  <el-table ref="table" :data="tableData" v-bind="$attrs" v-on="$listeners" v-loading="loading">
    <!-- checkbox等 -->
    <slot name="y-type"></slot>
    <el-table-column
      v-if="selection"
      type="selection"
      :selectable="(row, index) => selectable ? selectable(row, index) : true"
      width="55">
    </el-table-column>
    <!-- 序号-->
    <slot name="y-index"></slot>
    <el-table-column
      v-if="index"
      type="index"
      label="序号"
      width="60">
    </el-table-column>
    <template v-for="(column, index) in columns">
      <slot :name="column.prop" v-if="!!column.template"></slot>
      <el-table-column
        v-else
        :key="`col_${index}`"
        v-bind="Object.assign({},alignAttrs,column)">
      </el-table-column>
    </template>
    <!-- 操作-->
    <slot name="y-oper"></slot>
  </el-table>
  <el-pagination
    v-if="defaultPagination"
    :class="{'pagination-fixed': paginationFixed}"
    position="right"
    :current-page.sync="yPagination.currentPage"
    :page-size.sync="yPagination.pageSize"
    :page-sizes="yPagination.pageSizes"
    :layout="yPagination.layout"
    :total="yPagination.total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"></el-pagination>
</div>
</template>

<script>
export default {
  name: "YTable",
  props: {
    title: String,
    selection: Boolean,
    unableSelectAll: {//仅对配置selection有效
      type: Boolean,
      default: false
    },
    selectable: Function,//仅对配置selection有效
    index: Boolean,
    getDataWay: Object,
    columns: Array,
    alignAttrs: {
      default: () => ({
        headerAlign: 'center',
        align: 'center'
      })
    },
    pagination: [String, Object, Boolean],
    paginationFixed: {
      type: Boolean,
      default: false,
    },
    tbConfig: Object,
    immediate: {
      type: Boolean,
      default: true
    }
  },
  data(){
    return {
      tableData: [],
      defaultPagination: {},
      yPagination: {},
      preParam: null,//上一次搜索的param,只支持url
      loading: false,
      loadLock: false//刷新锁
    }
  },
  methods:{
    handleCurrentChange(val){
      !this.lock && this.loadData();
    },
    handleSizeChange(val){
      !this.lock && this.loadData();
    },
    loadData(param, jumpToFirst){/* = !!param*/
      //let resetPagi = !!param;
      let thisParam = (param || this.preParam || {});
      if(jumpToFirst){
        this.loadLock = true;
        //this.yPagination.pageSize = this.defaultPagination.pageSize;
        this.yPagination.currentPage = this.defaultPagination.currentPage;
        this.loadLock = false;
      }
      let data = {
        pageNum: this.yPagination.currentPage,
        pageSize: this.yPagination.pageSize,
        ...thisParam
      }
      this.loading = true;
      this.$yAxios({
        method: 'post',
        url: this.getDataWay.data,
        data
      }, info => {
        this.preParam = thisParam;
        //当前页非第一页且无数据, 跳转到有数据的最后一页
        if(this.yPagination.currentPage !== 1 && !info.list.length){
          this.yPagination.currentPage = info.pages;
          this.loadData();
        }else{
          this.yPagination.total = info.total;
          this.tableData = info.list;
          this.loading = false;
          this.$nextTick(() => {
            this.$emit("load-data", this.tableData, this.$refs['table']);
          })
        }
      }, e => {
        this.loading = false;
      })
    },
    doLoadData(){
      if ((this.getDataWay.dataType || '').toLowerCase() === 'url') { // 根据url发送请求获取table数据
        this.immediate && this.loadData(this.getDataWay.param)//请求数据
      }else{ //直接传数据
        if (this.getDataWay.data.length && this.pagination) {
          this.yPagination.total = this.getDataWay.data.length
        }
        this.tableData = this.getDataWay.data || []
      }
      this.$emit("init-data", this.tableData, this.$refs['table']);
    },
  },
  created(){
    this.defaultPagination = (function initPagination(val){
      if(!val && val !== '') return false;
      else if(val === true || val === ''){
        return {
          total: 0,
          currentPage:1,
          pageSize: 10,
          position: "right",
          pageSizes: [5, 10, 30, 50, 100],
          layout: "sizes,total,prev, pager, next,jumper"
        }
      }else return val;
    }).call(this, this.pagination)
    if(this.defaultPagination) this.yPagination = {...this.defaultPagination};
    this.doLoadData();
  },
  watch:{
    'getDataWay.data'(val){
      this.doLoadData();
    }
  }
}
</script>

<style scoped lang="less">
.YTable{
  &.y-unable-select-all{
    /deep/.el-table__header-wrapper  .el-checkbox{//找到表头那一行，然后把里面的复选框隐藏掉
      display:none!important;
    }
  }
  >.YTable-tHeader, >.YTable-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    >.YTable-title{
      >span{
        display: inline-block;
        height: 40px;
        line-height: 40px;
      }
    }
    >.YTable-buttons{
      display: inline-block;
      margin: 10px 0;
    }
  }
  >.YTable-tHeader{
    border: @common-border;
  }
  .el-pagination{
    text-align: right;
    margin-top: 10px;
    &.pagination-fixed{
      position: sticky;
      bottom: 0;
      background: #fff;
      height: 50px;
      transform: translateY(20px);
      margin-top: -10px;
      margin-bottom: -20px;
    }
  }
}
</style>